<!DOCTYPE html>
<html ng-app="myApp" ng-controller="myCon">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <link rel="stylesheet" href="css/详情页.css"/>
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
</head>
<body>
<div id="outer">
    <div class="nav">
        <div class="top_nav_inn">
            <!-- 以下是top导航左侧-->
            <ul class="top_nav_inn_left">
                <i class="fa fa-home fa-1x top_i_1"></i>
                <li ng-repeat="x in topnav"><a href="">{{x}}</a></li>
            </ul>
            <!-- 以下是top导航右侧-->
            <ul class="top_nav_inn_right">
                <li>
                    <a href="">我的淘宝</a>
                </li>
                <li>
                    <i class="fa fa-heart fa-1x top-i_2"></i>
                    <a href="">我关注的品牌</a>
                </li>
                <li>
                    <i class="fa fa-heart fa-1x top-i_2"></i>
                    <a href="">购物车0件</a>
                </li>
                <li><a href="">收藏夹</a></li>
                <li><a href="">|</a></li>
                <li>
                    <i class="fa fa-heart fa-1x top-i_2"></i>
                    <a href="">手机版</a>
                </li>
                <li><a href="">淘宝网</a></li>
                <li><a href="">企业购</a></li>
                <li><a href="">商家支持</a></li>
                <li>
                    <i class="fa fa-list fa-1x top-i_2"></i>
                    <a href="">网站导航</a>
                </li>
            </ul>
            <div class="top_u_r_li1">
                <p><a href="">已买到的宝贝</a></p>
                <p><a href="">已卖出的宝贝</a></p>
            </div>
            <div class="top_u_r_li4">
                <p><a href="">收藏的宝贝</a></p>
                <p><a href="">收藏的店铺</a></p>
            </div>
            <div class="top_u_r_li6"><img src="images/2.png" alt=""/></div>
            <!--以下用JSON填内容-->
            <div class="top_u_r_li10"></div>
        </div>
    </div>
    <div class="top_inn1">
        <div class="logo"><a href=""><img src="images/3.png" alt=""/></a></div>
        <div class="yilishabai">
            <p><a href="">伊丽莎白旗舰店</a></p>
            <span>品牌直销</span>
            <i class="fa fa-weixin fa-lg top_i_3"></i>
        </div>
        <div class="miaoshu">
            <span>描&nbsp;述</span>&nbsp;
            <span>服&nbsp;务</span>&nbsp;
            <span>物&nbsp;流</span> <br/>&nbsp;
            <span>4.8</span>&nbsp;&nbsp;&nbsp;
            <span>4.9</span>&nbsp;&nbsp;
            <span>4.9</span>
        </div>
        <div class="miaoshu_inn"></div>
        <div class="phone">
            <p>手机逛</p>
            <i class="fa fa-arrows-alt fa-lg top_i_4"></i>
        </div>
        <div class="phone_inn">
            <img src="images/5.png" alt=""/>
            <span>扫一扫，手机逛起来</span>
        </div>
        <div class="top_inp">
            <input type="text" name="" id="" placeholder="呵护家的温度"/>
            <button class="top_but1">搜天猫</button>
            <button class="top_but2">搜本店</button>
        </div>
        <ul class="top_inp_ul">
            <li ng-repeat="y in topnava">
                <a href="">{{y}}</a>
                <span>|</span>
            </li>
        </ul>
    </div>
    <div class="top_inn2"></div>
    <div class="top_inn3">
        <div class="top_inn3_nav">
            <ul class="top_inn3_u1">
                <li>
                    <a href="">本店所有商品</a>
                    <div class="top_quan1">
                        <i class="fa fa-angle-up fa-angle-up top_i_5"></i>
                    </div>
                </li>
                <li><a href="">首页</a></li>
                <li><a href="">天猫38女王节</a></li>
                <li><a href="">新品上市</a></li>
                <li>
                    <a href="">戒指</a>
                    <div class="top_quan1">
                        <i class="fa fa-angle-up fa-angle-up top_i_5"></i>
                    </div>
                </li>
                <li>
                    <a href="">项链&吊坠</a>
                    <div class="top_quan1">
                        <i class="fa fa-angle-up fa-angle-up top_i_5"></i>
                    </div>
                </li>
                <li><a href="">耳钉</a></li>
            </ul>
            <ul class="top_inn3_u2">
                <li ng-repeat="z in top_inn3_1">
                    <a href="">{{z}}</a>
                    <span>
                        <i class="fa fa-angle-right fa-lg top_1_6"></i>
                    </span>
                </li>
            </ul>
            <div class="top_inn3_u2_1">
                <ul>
                    <li ng-repeat="x in top_inn3_1_1"><a href="">{{x}}</a></li>
                </ul>
            </div>
            <div class="top_inn3_u2_2">
                <ul>
                    <li ng-repeat="x in top_inn3_1_2"><a href="">{{x}}</a></li>
                </ul>
            </div>
            <!--这是导航栏戒指下面的菜单栏-->
            <div class="top_inn3_u2_3">
                <ul>
                    <li ng-repeat="x in top_inn3_1_3"><a href="">{{x}}</a></li>
                </ul>
            </div>
            <!--这是项链下面的菜单栏-->
            <div class="top_inn3_u2_4">
                <ul>
                    <li ng-repeat="x in top_inn3_1_4"><a href="">{{x}}</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="body_con1">
        <!--以下是放大镜部分-->
        <div class="con1_fangdajing">
            <img src="images/8.jpg" alt="" class="min"/>
            <p class="meng"></p>
        </div>
        <div class="big">
            <img src="images/8.jpg" alt="" class="max"/>
        </div>
        <!--以下是放大镜下面的四张图片-->
        <div class="con1_fangdajing_inn">
            <div class="con1_fangdajing_inn_1"><img src="" alt=""/></div>
            <div class="con1_fangdajing_inn_1"><img src="" alt=""/></div>
            <div class="con1_fangdajing_inn_1"><img src="" alt=""/></div>
            <div class="con1_fangdajing_inn_1"><img src="" alt=""/></div>
            <div class="con1_fangdajing_inn_1"><img src="" alt=""/></div>
        </div>
        <div class="con1_left_p">
            <ul>
                <li>
                    <i class="fa fa-share-alt fa-lg con1_i_1"></i>
                    <a href="">分享</a>
                </li>
                <li>
                    <i class="fa fa-star fa-lg con1_i_1"></i>
                    <a href="">收藏商品（5094人气）</a>
                </li>
                <li><a href="">举报</a></li>
            </ul>
        </div>
        <!--以下是con1中间部分   尺寸大小-->
        <div class="con1_cen">
            <span class="con1_cen_sp1">18K金群镶钻戒女1克拉结婚求婚钻石戒指可定制铂金玫瑰金婚戒对戒</span> <br/>
            <span class="con1_cen_sp2">领优惠券 享折上折 附带鉴定证书</span>
            <div class="con1_cen_d1">
                <img src="images/19.png" alt=""/>
                <span class="con1_cen_sp3">全天猫实物商品通用</span>
                <span class="con1_cen_sp4"><a href="">去刮券</a></span>
                <div class="con1_cen_quan1">
                    <a href=""><i class="fa fa-angle-right fa-lg con1_i_2"></i></a>
                </div>
                <span class="con1_cen_sp5">价格</span>
                <span class="con1_cen_sp6">￥9800.00</span> <br/>
                <span class="con1_cen_sp7">促销价</span>
                <span class="con1_cen_sp8">￥4900.00</span>
                <div class="con1_cen_quan2">女神节特惠</div>
            </div>
            <ul class="con1_cen_u1">
                <li>运费</li>
                <li>广东深圳</li>
                <li>至</li>
                <li>
                    北京
                    <i class="fa fa-angle-down fa-lg"></i>
                </li>
                <li>快递：</li>
                <li>0.00</li>
            </ul>
            <div class="con1_area">
                <span>×</span>
                <ul>
                    <li ng-repeat="x in con1_cen_area">{{x}}</li>
                </ul>
            </div>
            <div class=""></div>
            <!--以下是型号部分-->
            <div class="box">
                <ul class="ulEle">
                </ul>
            </div>


        </div>

    </div>
</div>
</body>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/详情页.js"></script>
<script type="text/javascript">
    //top导航   通过应用动态创建
    var app=angular.module("myApp",[]);
    var top_arr1=["天猫首页","喵，欢迎来天猫","请登录","免费注册"];
    var top_arr2=["钻戒", "钻石","对戒","钻戒女1克拉","钻石戒指","铂金戒指","铂金对戒","求婚戒指"];
    var top_arr3=["所有宝贝", "戒指","项链&吊坠","耳钉","手链&手镯","裸钻专区","伊莎丽维特色系列","新品上市","异形钻","彩钻","价格专场"];
    var top_arr4=["按综合","按销量","按新品","按价格"];
    var top_arr5=["钻石女戒","钻石男戒","对戒"];
    var top_arr6=["钻石项链","素金吊坠","钻石吊坠","素金项链"];
    var con1_arr2=["北京","天津","上海","重庆","河北","山西","内蒙","辽宁","吉林","临济"];

    app.controller("myCon",function($scope){
        $scope.topnav=top_arr1;
//        以下是logo部分搜索框下面的导航
        $scope.topnava=top_arr2;
//        以下是   本店所有商品  下面的菜单栏
        $scope.top_inn3_1=top_arr3;
//        以下是   本店所有商品  下面的菜单栏 里面的菜单栏
        $scope.top_inn3_1_1=top_arr4;
        $scope.top_inn3_1_2=top_arr5;
        $scope.top_inn3_1_3=top_arr5;
        $scope.top_inn3_1_4=top_arr6;
        $scope.con1_cen_area=con1_arr2;

    })
//    以下是类型部分
    var arr=["32分（20分主钻+12分副钻","37分（20分主钻+12分副钻","42分（20分主钻+12分副钻","47分（20分主钻+12分副钻","52分（20分主钻+12分副钻","65分（20分主钻+12分副钻","75分（20分主钻+12分副钻"];
    window.onload=function() {
        var uls=document.getElementsByClassName("ulEle")[0];
        var lis=uls.getElementsByTagName("li");
        for(var index in arr){
            var lis1=document.createElement("li");
            lis1.innerHTML=arr[index];
            uls.appendChild(lis1);
            lis[index].className="liEle";
        }
//        for(var index1 in lis){
//            lis[index1].className="liEle";
//        }
    }

</script>
</html>